<%@page import="com.sdry.model.llm.User"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>工位：离心</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="${pageContext.request.contextPath }/assets/css/layui.css"  media="all">
	<link rel="stylesheet" href="${pageContext.request.contextPath }/assets/css/toastr.min.css"  media="all">
	
	<script src="${pageContext.request.contextPath }/assets/layui.js" charset="utf-8"></script>
	<script src="${pageContext.request.contextPath }/assets/layui.all.js"></script>
	<script src="${pageContext.request.contextPath }/assets/js/jquery.min.js" charset="utf-8"></script>
	<script src="${pageContext.request.contextPath }/assets/js/toastr.min.js" charset="utf-8"></script>
    <style type="text/css">
    	.font1 {
    		font-family:微软雅黑;
    		font-size:52px;
    		line-height: 110px;
    		color: #ffffff
    	}
    	.font2 {
    		font-family:微软雅黑;
    		font-size:36px;
    		line-height: 80px;
    		color: #ffffff
    	}
    	.font3 {
    		font-family:微软雅黑;
    		font-size:36px;
    		line-height: 80px;
    	}
    	/* 设置表头 */
		#table1 tr .headTd {
			background-color: #0073BD;
			color: #0073BD;
		}
    	
    </style>
	<style>
		#code{
			font-size:26px;
			/* width:400px; */
			display:inline-block;
			height: 600px; 
		}
		#tdd tr td{
			/* border: 45px #06b0de solid; */
			font-size: 18px;
			min-width: 100px;
			height: 45px;
			border-right: 45px #06b0de solid;
			border-top: 0px #06b0de solid;
			border-left: 0px #06b0de solid;
			border-bottom: 0px #06b0de solid;
			
			line-height: 25px;
			align:center;
		}
		#tdd tr td img{
			min-height: 101px;
			min-width: 101px;
			vertical-align: bottom;
		}
		#tdd a{ 
			border:1px solid white;
			display:inline-block;
			min-width: 101px;
		    color: #8a074c;
		    min-height: 101px; 
			line-height:80px; 
			display: block;
		}
	</style>
</head>

<%
	User people = (User) request.getSession().getAttribute("currentUser");
    String name = null;
    String date = null;
    if(people != null){
      name = people.getUserName();
      date = people.getRemark3();
    }
%>

<script type="text/javascript">
	var date = '<%=date%>';
	//离心机状态定时刷新
	setInterval(function() {lxjStare(),selectNum},1000*60*0.5);
	//时间
	setInterval(function() {mytime()},1000);
	//时分秒
	function mytime(){
	    var a = new Date();
	    var b = a.toLocaleTimeString('chinese', { hour12: false });
	    document.getElementById("time1").innerHTML = b;
	}
	//年月日+星期
	function load(){
		var d=new Date();
		var day=d.getDate();
		var month=d.getMonth() + 1;
		var year=d.getFullYear();
		var weekday=new Array(7);
		weekday[0]="星期日";
		weekday[1]="星期一";
		weekday[2]="星期二";
		weekday[3]="星期三";
		weekday[4]="星期四";
		weekday[5]="星期五";
		weekday[6]="星期六";
		document.getElementById('myTime').innerHTML = year + "年" + add0(month) + "月" + add0(day)+"日";
		//date = year + "-" + add0(month) + "-" + add0(day);
		document.getElementById('myWeek').innerHTML = weekday[d.getDay()];
	}
	 
	 function add0(m){
	    	return m<10?'0'+m:m 
	 }
    
	//初始化
	$(function() {
		//年月日+星期
		load();
		//时间
		mytime();
		//根据查询
    	selectNum();
    	lxjStare()
	})
    
	function selectNum() {
    	var position = "离心";
    	var product = "";
    	
    	//计划量
    	$.ajax({
	    	type:'post',
	    	async:false, 
	    	url:'${pageContext.request.contextPath }/Kanban/selectByDate.do',
	    	data: {"format":date,"product":product,"position":position},
	    	success:function(data){
	    		$("#planNum").html(data+"支");
	    	}
	    }); 
    	
    	//日产量
	    $.ajax({
	    	type:'post',
	    	async:false, 
	    	url:'${pageContext.request.contextPath }/Kanban/selectNumByDate.do',
	    	data: {"format":date},
	    	success:function(data){
	    		$("#realityNum").html(data+"支");
	    	}
	    })
	    
	    
	}
	//离心机状态刷新
	function lxjStare(){ 
		var ccodeArr = new Array()
		var ztArr = new Array()
		var iArr = new Array()
		//绑定
		var bdcArr = new Array()
		var bdiArr = new Array()
		var bdztArr = new Array()
		$.ajax({
	        type:'post',
	        url:'${pageContext.request.contextPath }/others/deviceByMution.do',
	        data:{"deviceName":"离心机"},
	        dataType: 'JSON',
	        async:false, 
	        //传递数组使用
	        success:function(data){
	        	if(data.length == 16){
	        		for (var i = 0; i < data.length; i++) {
	    		    	var dd = document.getElementById("a"+(i+1));
	    				//给a标签赋值
	    				dd.innerText =data[i].deviceNo;
    					var oDiv = document.getElementById("s"+(i+1)); 
	    				if(data[i].remark05 == "" || data[i].remark05 == null || data[i].remark05 == "空闲"){
	    					$("#s"+(i+1)).html("空闲");
	    					oDiv.style.background = "#00FE67";
	    				}else{
	    					if(data[i].remark05 == "绑定"){
		    					$("#s"+(i+1)).html(data[i].remark05);
		    					oDiv.style.background = "#4FBFFF";
		    					bdcArr.push(data[i].deviceNo);
		    					bdiArr.push(i);
		    					bdztArr.push(data[i].remark05);
	    					}else{
	    						var zt = data[i].remark05;
	    						ccodeArr.push(data[i].deviceNo);
	    						ztArr.push(zt);
	    						iArr.push(i);
		    					$("#s"+(i+1)).html(zt);
		    					if(data[i].remark05 == "1遍胶"){
			    					oDiv.style.background = "#E7FF75";
		    					}else if(data[i].remark05 == "2遍胶"){
			    					oDiv.style.background = "#FFD800";
		    					}else if(data[i].remark05 == "3遍胶"){
			    					oDiv.style.background = "#FF9600";
		    					}
	    					}
	    				}
	    		    }
	        	}else{
	    			toastr.warning("该离心机个数不是16！");
	        	}
	        }
	    })
	    for(var i = 0; i < iArr.length; i++) {
	    	//计划量
	    	$.ajax({
		    	type:'post',
		    	async:false, 
		        url:'${pageContext.request.contextPath }/Kanban/selectTimeByCcode.do',
		    	data: {"ccode":ccodeArr[i]},
		    	dataType: 'JSON',
		    	success:function(data){
		    		var html = ztArr[i];
		    		var ctubes = data.ctubes;
		    		for(var j = 0; j < ctubes.length; j++) {
		    			html += "<br>"+ctubes[j]
		    		}
	    			html += "<br>"+data.time+"  "+data.wenDu+"℃"
		    		$("#s"+(iArr[i]+1)).html(html);
		    	}
		    }); 
		}
	    for(var i = 0; i < bdiArr.length; i++) {
	    	//计划量
	    	$.ajax({
		    	type:'post',
		    	async:false, 
		        url:'${pageContext.request.contextPath }/Kanban/selectCtubeByCcode.do',
		    	data: {"ccode":bdcArr[i]},
		    	dataType: 'JSON',
		    	success:function(data){
		    		var html = bdztArr[i];
		    		var ctubes = data.ctubes;
		    		for(var j = 0; j < ctubes.length; j++) {
		    			html += "<br>"+ctubes[i]
		    		}
		    		$("#s"+(bdiArr[i]+1)).html(html);
		    	}
		    }); 
		}
	}
</script>
<body>
   
   <table id="table1" style="width: 100%; text-align: center;" border="1px solid #000">
   		<tr>
   			<td width="25%">
   				<img alt="" src="${pageContext.request.contextPath }/img/logo.png" width="70%">
   			</td>
   			<td colspan="2" class="headTd">
   				<p class="font1">离心机现况</p>
   			</td>
   			<td width="25%">
   				<img alt="" src="${pageContext.request.contextPath }/img/logo.png" width="70%">
   			</td>
   			
   		</tr>
   		<tr>
   			<td colspan="4" style="background-color: #000000b3;color: #000;">
   				<a id="myTime"  class="font2"></a>
   				<a id="time1" class="font2"></a>
   				<a id="myWeek"  class="font2"></a>
   			</td>
   		</tr>
   		
   		<tr>
   			<td colspan="4" class="font3" style="border: 0;background-color: #06b0de;">
   				<div id="code">
					<br>
					<table id="tdd">
						<tr>
							<td style="background:url(${pageContext.request.contextPath }/img/1.png) no-repeat 0 0;background-size: 100% 100%;"><a id="a1"></a></td>
							<td style="background:url(${pageContext.request.contextPath }/img/2.png) no-repeat 0 0;background-size: 100% 100%;"><a id="a2"></a></td>
							<td style="background:url(${pageContext.request.contextPath }/img/3.png) no-repeat 0 0;background-size: 100% 100%;"><a id="a3"></a></td>
							<td style="background:url(${pageContext.request.contextPath }/img/4.png) no-repeat 0 0;background-size: 100% 100%;"><a id="a4"></a></td>
							<td style="background:url(${pageContext.request.contextPath }/img/5.png) no-repeat 0 0;background-size: 100% 100%;"><a id="a5"></a></td>
							<td style="background:url(${pageContext.request.contextPath }/img/6.png) no-repeat 0 0;background-size: 100% 100%;"><a id="a6"></a></td>
							<td style="background:url(${pageContext.request.contextPath }/img/7.png) no-repeat 0 0;background-size: 100% 100%;"><a id="a7"></a></td>
							<td style="background:url(${pageContext.request.contextPath }/img/8.png) no-repeat 0 0;background-size: 100% 100%;"><a id="a8"></a></td>
						</tr>
						<tr>
							<td id="s1"></td>
							<td id="s2"></td>
							<td id="s3"></td>
							<td id="s4"></td>
							<td id="s5"></td>
							<td id="s6"></td>
							<td id="s7"></td>
							<td id="s8"></td>
						</tr>
						<tr>
							<td style="background:url(${pageContext.request.contextPath }/img/9.png) no-repeat 0 0;background-size: 100% 100%;"><a id="a9"></a></td>
							<td style="background:url(${pageContext.request.contextPath }/img/10.png) no-repeat 0 0;background-size: 100% 100%;"><a id="a10"></a></td>
							<td style="background:url(${pageContext.request.contextPath }/img/11.png) no-repeat 0 0;background-size: 100% 100%;"><a id="a11"></a></td>
							<td style="background:url(${pageContext.request.contextPath }/img/12.png) no-repeat 0 0;background-size: 100% 100%;"><a id="a12"></a></td>
							<td style="background:url(${pageContext.request.contextPath }/img/13.png) no-repeat 0 0;background-size: 100% 100%;"><a id="a13"></a></td>
							<td style="background:url(${pageContext.request.contextPath }/img/14.png) no-repeat 0 0;background-size: 100% 100%;"><a id="a14"></a></td>
							<td style="background:url(${pageContext.request.contextPath }/img/15.png) no-repeat 0 0;background-size: 100% 100%;"><a id="a15"></a></td>
							<td style="background:url(${pageContext.request.contextPath }/img/16.png) no-repeat 0 0;background-size: 100% 100%;"><a id="a16"></a></td>
						</tr>
						<tr>
							<td id="s9"></td>
							<td id="s10"></td>
							<td id="s11"></td>
							<td id="s12"></td>
							<td id="s13"></td>
							<td id="s14"></td>
							<td id="s15"></td>
							<td id="s16"></td>
						</tr>
					</table>
					<br>
				</div>
			</td>
   		</tr>
   		<tr>
   			<td colspan="4" height="25px"> 
   		</tr>
   		<tr>
   			<td class="font3" style="background-color: #06b0de;border-width: 1px; border-color: #ffffff">计划数量</td>
   			<td class="font3" width="25%" id="planNum"></td> 
   			<td class="font3" style="background-color: #06b0de;border-width: 1px; border-color: #ffffff">实际数量</td>
   			<td class="font3" width="25%" id="realityNum"></td>
   		</tr> 
   </table>
</body>
</html>